<template>
  <div class="home">
   <button @click="handleData">修改属性</button>
  </div>
</template>

<script setup>
import { reactive } from "vue";
  //vue3.0响应式原理
  //Reflect映射
  let a={
    name:'pp',
    age:18,
  }
  let person = new Proxy(a,{
    get(target,propName){
      console.log('有人获取了p的某一个属性',target,propName);
      // return target[propName]
      return Reflect.get(target, propName)
    },
    set(target, propKey, value,){
      console.log('有人修改或者新增了p的某一个属性',target, propKey, value,);
      // target[propKey]=value
      // return true
      return Reflect.set(target, propKey, value)
    },
    deleteProterty(target,propKey){
       console.log('有人删除了p的某一个属性',target, propKey);
      //  return delete target[propKey]
      return Reflect.deleteProperty(target,propKey)
    }
  })  
  function handleData(){
    console.log(person);
    //获取
    // console.log(person.name);
    //修改
    // person.name="lz"
    // person.sex='男'
    //删除
    delete person.age
    console.log(person);
    console.log(a);
  }
  
  
</script>
